<template>
  <div>
    <el-dialog
      title="管理属性库"
      :visible.sync="showDialog"
      width="700px"
      :before-close="handleClose"
    >
      <div class="attribute-manager">
        <table>
          <thead>
            <tr>
              <th>属性名称</th>
              <th>属性值</th>
              <th>支持多选</th>
              <th>是否必填</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(attribute, index) in attributes" :key="index">
              <td>{{ attribute.attributeName }}</td>
              <td>{{ attribute.valueStr }}</td>
              <td>
                <i v-if="attribute.multiSelect" class="el-icon-check"></i>
                <i v-else class="el-icon-close"></i>
              </td>
              <td>
                <i v-if="attribute.required" class="el-icon-check"></i>
                <i v-else class="el-icon-close"></i>
              </td>
              <td>
                <el-button type="text" @click="editAttribute(attribute)"
                  >修改</el-button
                >
                <el-button type="text" @click="deleteAttribute(attribute)"
                  >删除</el-button
                >
              </td>
            </tr>
          </tbody>
        </table>
        <div class="attrbutes-wrap mt10">
          <el-button
            icon="el-icon-plus"
            type="text"
            @click="addAttribute"
            >添加属性</el-button
          >
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
      </span>
    </el-dialog>

    <AddAttribute
      v-if="showEditDialog"
      :showDialog.sync="showEditDialog"
      :editAttributeData="editAttributeData"
      @confirm-add="getList"
    />
  </div>
</template>

<script>
import { getAttributeList, attributeDel } from "@/api/goods/attribute.js";
import AddAttribute from "./AddAttribute.vue";
export default {
  components: { AddAttribute },
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      attributes: [],
      showEditDialog: false,
      editAttributeData: {},
      editIndex: -1,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getAttributeList().then((res) => {
        this.attributes = res.data;
        this.$store.commit('SET_ATTRIBUTELIST', this.attributes)
      });
    },
    addAttribute() {
      this.showEditDialog = true;
      this.editAttributeData = null;
    },
    editAttribute(item) {
      this.editAttributeData = JSON.parse(JSON.stringify(item));
      this.showEditDialog = true;
    },
    deleteAttribute(attribute) {
      this.$confirm("此操作将永久删除该属性, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        attributeDel(attribute.attributeId).then((res) => {
          this.$modal.msgSuccess(res.msg);
          this.getList();
        });
      });
    },
    saveAttribute() {
      const values = this.editAttributeData.valuesString
        .split(",")
        .map((value) => value.trim());
      if (this.editIndex !== -1) {
        this.attributes[this.editIndex] = {
          ...this.editAttributeData,
          values,
        };
      } else {
        this.attributes.push({
          ...this.editAttributeData,
          values,
        });
      }
      this.showEditDialog = false;
    },
    cancelEdit() {
      this.showEditDialog = false;
    },
    handleClose() {
      this.$emit("update:showDialog", false);
    },
    handleSubmit() {},
  },
};
</script>
<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}


.attrbutes-wrap {
  text-align: center;
  border-radius: 5px;
  background: #F7F7F7;
}
</style>
